<template>
  <div class="redis-card">
    <s-scroll ref="scrollView" style="height: calc(100% - 40px)">
      <div ref="redisHistoryView" class="redis-history">
        <div
          v-for="(item, index) in history"
          :key="index"
          class="history-item"
          @contextmenu.prevent="copy(item.content)"
        >
          {{ item.prefix }} {{ item.content }}
        </div>
      </div>
    </s-scroll>
    <div class="redis-command">
      <div style="width: 50px; position: relative; float: left">redis></div>
      <input
        ref="cmdInput"
        v-model="cmd"
        class="redis-input"
        @keydown.enter="executeCmd"
        @keydown.up="previousCmd"
        @keydown.down="nextCmd"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { getCurrentInstance, nextTick, ref } from 'vue'
import moment from 'moment'
import { message } from 'ant-design-vue'
import useClipboard from 'vue-clipboard3'
export default {
  setup(props) {
    const { toClipboard } = useClipboard()
    const redisHistoryView = ref()
    const history = ref([])
    const historyCmd = []
    const cmdInput = ref(null)
    const scrollView = ref(null)
    const cmd = ref('')
    const context = getCurrentInstance()?.appContext.config.globalProperties
    let currentHistoryIndex = 0
    const previousCmd = () => {
      if (currentHistoryIndex != 0) {
        currentHistoryIndex--
      }
      const val = historyCmd[currentHistoryIndex]
      cmd.value = val
      if (cmd.value && cmd.value.length > 0) {
        setTimeout(() => {
          cmdInput.value.setSelectionRange(val.length, val.length)
        }, 20)
      }
    }
    const nextCmd = () => {
      currentHistoryIndex++
      if (currentHistoryIndex > historyCmd.length - 1) {
        currentHistoryIndex = historyCmd.length - 1
      }
      const val = historyCmd[currentHistoryIndex]
      cmd.value = val
      if (cmd.value && cmd.value.length > 0) {
        setTimeout(() => {
          cmdInput.value.setSelectionRange(val.length, val.length)
        }, 20)
      }
    }
    const executeCmd = () => {
      const val = cmd.value
      if (val.length > 0) {
        if (val == 'clear') {
          history.value = []
          currentHistoryIndex = 0
        } else {
          let now = moment().format('YYYY-MM-DD HH:mm:ss')
          history.value.push({
            prefix: `[${now}] redis>`,
            content: val
          })
          historyCmd.push(val)
          context?.$api.PUT('/toolkit/redis/execute', { command: val }).then((res) => {
            now = moment().format('YYYY-MM-DD HH:mm:ss')
            if (res.data.length > 1) {
              for (let p in res.data) {
                res.data[p] = {
                  prefix: `${parseInt(p) + 1})`,
                  content: res.data[p]
                }
              }
            } else {
              res.data[0] = {
                prefix: null,
                content: res.data[0]
              }
            }
            history.value.push(...res.data)
            nextTick(() => {
              scrollView.value.$refs.scroll.scrollTo({ y: redisHistoryView.value.offsetHeight })
            })
          })
        }
      }
      currentHistoryIndex = historyCmd.length == 0 ? 0 : historyCmd.length - 1
      cmd.value = ''
    }
    const copy = (val) => {
      toClipboard(val)
        .then((msg) => {
          message.success('复制完毕')
        })
        .catch((err) => {
          message.error('复制失败' + err)
        })
    }
    return {
      cmd,
      copy,
      executeCmd,
      history,
      previousCmd,
      nextCmd,
      cmdInput,
      scrollView,
      redisHistoryView
    }
  }
}
</script>
<style lang="less" scoped>
/* 这个$props没有写错,不要改 */
.redis-card {
  background: #282c34;
  height: 100%;
  width: 100%;
  color: white;
  font-size: 16px;
  padding: 10px;
  font-family: monospace;
}

.redis-history {
  width: 100%;
}

.redis-command {
  position: relative;
}
.history-item {
  white-space: nowrap;
}
.redis-input {
  position: relative;
  float: left;
  width: calc(100% - 50px);
  caret-color: white;
  background: transparent;
  border: transparent;
}
.redis-input:focus {
  background: transparent;
  border: transparent;
  outline: 0px;
}
</style>
